<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Commit Description Generator</title>
  <script src="https://cdn.jsdelivr.net/npm/react@18.2.0/umd/react.production.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/react-dom@18.2.0/umd/react-dom.production.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/babel-standalone@6.26.0/babel.min.js"></script>
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    // Embedded md5.js logic for Baidu Translate API signature
    var MD5 = function (string) {function RotateLeft(lValue,iShiftBits){return(lValue<<iShiftBits)|(lValue>>>(32-iShiftBits));}function AddUnsigned(lX,lY){var lX4,lY4,lX8,lY8,lResult;lX8=(lX&0x80000000);lY8=(lY&0x80000000);lX4=(lX&0x40000000);lY4=(lY&0x40000000);lResult=(lX&0x3FFFFFFF)+(lY&0x3FFFFFFF);if(lX4&lY4){return(lResult^0x80000000^lX8^lY8);}if(lX4|lY4){if(lResult&0x40000000){return(lResult^0xC0000000^lX8^lY8);}else{return(lResult^0x40000000^lX8^lY8);}}else{return(lResult^lX8^lY8);}}function F(x,y,z){return(x&y)|((~x)&z);}function G(x,y,z){return(x&z)|(y&(~z));}function H(x,y,z){return(x^y^z);}function I(x,y,z){return(y^(x|(~z)));}function FF(a,b,c,d,x,s,ac){a=AddUnsigned(a,AddUnsigned(AddUnsigned(F(b,c,d),x),ac));return AddUnsigned(RotateLeft(a,s),b);};function GG(a,b,c,d,x,s,ac){a=AddUnsigned(a,AddUnsigned(AddUnsigned(G(b,c,d),x),ac));return AddUnsigned(RotateLeft(a,s),b);};function HH(a,b,c,d,x,s,ac){a=AddUnsigned(a,AddUnsigned(AddUnsigned(H(b,c,d),x),ac));return AddUnsigned(RotateLeft(a,s),b);};function II(a,b,c,d,x,s,ac){a=AddUnsigned(a,AddUnsigned(AddUnsigned(I(b,c,d),x),ac));return AddUnsigned(RotateLeft(a,s),b);};function ConvertToWordArray(string){var lWordCount;var lMessageLength=string.length;var lNumberOfWords_temp1=lMessageLength+8;var lNumberOfWords_temp2=(lNumberOfWords_temp1-(lNumberOfWords_temp1%64))/64;var lNumberOfWords=(lNumberOfWords_temp2+1)*16;var lWordArray=Array(lNumberOfWords-1);var lBytePosition=0;var lByteCount=0;while(lByteCount<lMessageLength){lWordCount=(lByteCount-(lByteCount%4))/4;lBytePosition=(lByteCount%4)*8;lWordArray[lWordCount]=(lWordArray[lWordCount]|(string.charCodeAt(lByteCount)<<lBytePosition));lByteCount++;}lWordCount=(lByteCount-(lByteCount%4))/4;lBytePosition=(lByteCount%4)*8;lWordArray[lWordCount]=lWordArray[lWordCount]|(0x80<<lBytePosition);lWordArray[lNumberOfWords-2]=lMessageLength<<3;lWordArray[lNumberOfWords-1]=lMessageLength>>>29;return lWordArray;};function WordToHex(lValue){var WordToHexValue="",WordToHexValue_temp="",lByte,lCount;for(lCount=0;lCount<=3;lCount++){lByte=(lValue>>>(lCount*8))&255;WordToHexValue_temp="0"+lByte.toString(16);WordToHexValue=WordToHexValue+WordToHexValue_temp.substr(WordToHexValue_temp.length-2,2);}return WordToHexValue;};function Utf8Encode(string){string=string.replace(/\r\n/g,"\n");var utftext="";for(var n=0;n<string.length;n++){var c=string.charCodeAt(n);if(c<128){utftext+=String.fromCharCode(c);}else if((c>127)&&(c<2048)){utftext+=String.fromCharCode((c>>6)|192);utftext+=String.fromCharCode((c&63)|128);}else{utftext+=String.fromCharCode((c>>12)|224);utftext+=String.fromCharCode(((c>>6)&63)|128);utftext+=String.fromCharCode((c&63)|128);}}return utftext;};var x=Array();var k,AA,BB,CC,DD,a,b,c,d;var S11=7,S12=12,S13=17,S14=22;var S21=5,S22=9,S23=14,S24=20;var S31=4,S32=11,S33=16,S34=23;var S41=6,S42=10,S43=15,S44=21;string=Utf8Encode(string);x=ConvertToWordArray(string);a=0x67452301;b=0xEFCDAB89;c=0x98BADCFE;d=0x10325476;for(k=0;k<x.length;k+=16){AA=a;BB=b;CC=c;DD=d;a=FF(a,b,c,d,x[k+0],S11,0xD76AA478);d=FF(d,a,b,c,x[k+1],S12,0xE8C7B756);c=FF(c,d,a,b,x[k+2],S13,0x242070DB);b=FF(b,c,d,a,x[k+3],S14,0xC1BDCEEE);a=FF(a,b,c,d,x[k+4],S11,0xF57C0FAF);d=FF(d,a,b,c,x[k+5],S12,0x4787C62A);c=FF(c,d,a,b,x[k+6],S13,0xA8304613);b=FF(b,c,d,a,x[k+7],S14,0xFD469501);a=FF(a,b,c,d,x[k+8],S11,0x698098D8);d=FF(d,a,b,c,x[k+9],S12,0x8B44F7AF);c=FF(c,d,a,b,x[k+10],S13,0xFFFF5BB1);b=FF(b,c,d,a,x[k+11],S14,0x895CD7BE);a=FF(a,b,c,d,x[k+12],S11,0x6B901122);d=FF(d,a,b,c,x[k+13],S12,0xFD987193);c=FF(c,d,a,b,x[k+14],S13,0xA679438E);b=FF(b,c,d,a,x[k+15],S14,0x49B40821);a=GG(a,b,c,d,x[k+1],S21,0xF61E2562);d=GG(d,a,b,c,x[k+6],S22,0xC040B340);c=GG(c,d,a,b,x[k+11],S23,0x265E5A51);b=GG(b,c,d,a,x[k+0],S24,0xE9B6C7AA);a=GG(a,b,c,d,x[k+5],S21,0xD62F105D);d=GG(d,a,b,c,x[k+10],S22,0x2441453);c=GG(c,d,a,b,x[k+15],S23,0xD8A1E681);b=GG(b,c,d,a,x[k+4],S24,0xE7D3FBC8);a=GG(a,b,c,d,x[k+9],S21,0x21E1CDE6);d=GG(d,a,b,c,x[k+14],S22,0xC33707D6);c=GG(c,d,a,b,x[k+3],S23,0xF4D50D87);b=GG(b,c,d,a,x[k+8],S24,0x455A14ED);a=GG(a,b,c,d,x[k+13],S21,0xA9E3E905);d=GG(d,a,b,c,x[k+2],S22,0xFCEFA3F8);c=GG(c,d,a,b,x[k+7],S23,0x676F02D9);b=GG(b,c,d,a,x[k+12],S24,0x8D2A4C8A);a=HH(a,b,c,d,x[k+5],S31,0xFFFA3942);d=HH(d,a,b,c,x[k+8],S32,0x8771F681);c=HH(c,d,a,b,x[k+11],S33,0x6D9D6122);b=HH(b,c,d,a,x[k+14],S34,0xFDE5380C);a=HH(a,b,c,d,x[k+1],S31,0xA4BEEA44);d=HH(d,a,b,c,x[k+4],S32,0x4BDECFA9);c=HH(c,d,a,b,x[k+7],S33,0xF6BB4B60);b=HH(b,c,d,a,x[k+10],S34,0xBEBFBC70);a=HH(a,b,c,d,x[k+13],S31,0x289B7EC6);d=HH(d,a,b,c,x[k+0],S32,0xEAA127FA);c=HH(c,d,a,b,x[k+3],S33,0xD4EF3085);b=HH(b,c,d,a,x[k+6],S34,0x4881D05);a=HH(a,b,c,d,x[k+9],S31,0xD9D4D039);d=HH(d,a,b,c,x[k+12],S32,0xE6DB99E5);c=HH(c,d,a,b,x[k+15],S33,0x1FA27CF8);b=HH(b,c,d,a,x[k+2],S34,0xC4AC5665);a=II(a,b,c,d,x[k+0],S41,0xF4292244);d=II(d,a,b,c,x[k+7],S42,0x432AFF97);c=II(c,d,a,b,x[k+14],S43,0xAB9423A7);b=II(b,c,d,a,x[k+5],S44,0xFC93A039);a=II(a,b,c,d,x[k+12],S41,0x655B59C3);d=II(d,a,b,c,x[k+3],S42,0x8F0CCC92);c=II(c,d,a,b,x[k+10],S43,0xFFEFF47D);b=II(b,c,d,a,x[k+1],S44,0x85845DD1);a=II(a,b,c,d,x[k+8],S41,0x6FA87E4F);d=II(d,a,b,c,x[k+15],S42,0xFE2CE6E0);c=II(c,d,a,b,x[k+6],S43,0xA3014314);b=II(b,c,d,a,x[k+13],S44,0x4E0811A1);a=II(a,b,c,d,x[k+4],S41,0xF7537E82);d=II(d,a,b,c,x[k+11],S42,0xBD3AF235);c=II(c,d,a,b,x[k+2],S43,0x2AD7D2BB);b=II(b,c,d,a,x[k+9],S44,0xEB86D391);a=AddUnsigned(a,AA);b=AddUnsigned(b,BB);c=AddUnsigned(c,CC);d=AddUnsigned(d,DD);}var temp=WordToHex(a)+WordToHex(b)+WordToHex(c)+WordToHex(d);return temp.toLowerCase();}
  </script>
</head>
<body>
  <div id="root"></div>
  <script type="text/babel">
    const { useState, useEffect } = React;

    const CommitForm = () => {
      const [formData, setFormData] = useState({
        commit_path_info: '<QuecOS><R02><quecos><10.66.86.133>',
        emailPrefix: 'larson.li',
        changeDescription: '',
        integrate_from_flag: 'N',
        integrate_from_id: '',
        changeCategory: '新增需求',
        rootCause: '',
        solution: '',
        jiraID: '',
        cveID: 'N',
        affectedFunction: [], // MODIFIED: Changed to array
        applicableProject: '分支测试',
        projectType: '标准项目',
        riskLevel: `质量风险-问题遇到的概率大小: 
质量风险-出现问题后的可恢复性:
质量风险-前后版本的兼容一致性: 
质量风险-问题对客户业务场景的影响：`,
        relatedChanges: '',
        atcDocDescription: 'N',
        atcDoc: '',
        dmProtocol: 'N',
        thirdPartyServer: 'N',
        thirdPartySoftware: 'N',
        audioDefault: 'N',
        configChange: 'N',
        mbnChange: 'N',
        timerIssue: 'N',
        paramCompatibility: 'N',
        storageWear: 'N',
        sensitiveInfo: 'N',
        paramReset: 'N',
        apiDocUpdate: 'N',
        otherBranches: 'N',
        otherBranchesText: '',
        rnDescription: 'N',
        rnDescriptionText: '',
        fsgUpdate: 'N',
        fsgTag: '',
        fsgSW: '',
        fsgRF: '',
        fsgDate: '',
        softwareTest: 'N',
        softwareTestText: '编译修改，无需测试',
        stressTest: 'N',
        stressTestText: '编译修改，无需测试',
        hardwareTest: 'N',
        hardwareTestText: '编译修改，无需测试',
        apAtCommand: 'N'
      });
      
      const [outputText, setOutputText] = useState('');

      const generateOutput = () => {
        let output = `${formData.commit_path_info}<${formData.emailPrefix}>: `;
        if (formData.integrate_from_flag === 'Y') {
          output += `integrate from ${formData.integrate_from_id} ${formData.changeDescription}\n`;
        }
        else {
          output += `${formData.changeDescription}\n`;
        }
        output += `<修改分类>: ${formData.changeCategory}\n`;
        output += `<根本原因>: ${formData.rootCause}\n`;
        output += `<解决方案>: ${formData.solution}\n`;
        output += `[Jira ID]: ${formData.jiraID}\n`;
        output += `[CVE ID]: ${formData.cveID}\n`;
        // MODIFIED: Generate affectedFunction string from array
        output += `<影响功能名称>: ${formData.affectedFunction.length > 0 ? formData.affectedFunction.join(',') : 'N'}\n`;
        output += `<适用项目>: ${formData.applicableProject}\n`;
        output += `<影响项目类型>: ${formData.projectType}\n`;
        output += `<风险等级>: ${formData.riskLevel}\n`;
        output += `[关联其它修改点]: ${formData.relatedChanges}\n`;
        output += `\n<<<研发自检>>>\n`;
        output += `[ATC 文档名称]: ${formData.atcDoc}\n`;
        output += `<是否使用运营商DM协议:Onenet/OMA/LwM2M等>: ${formData.dmProtocol}\n`;
        output += `<是否使用第三方服务器:XTRA等>: ${formData.thirdPartyServer}\n`;
        output += `<是否使用第三方软件:SSL库等>: ${formData.thirdPartySoftware}\n`;
        output += `<是否为音频默认参数>: ${formData.audioDefault}\n`;
        output += `<是否修改配置文件:rawdata分区数据修改等>: ${formData.configChange}\n`;
        output += `<是否修改MBN>: ${formData.mbnChange}\n`;
        output += `<是否存在定时器非预期的唤醒和休眠锁未释放>: ${formData.timerIssue}\n`;
        output += `<是否存在参数结构变更影响前后版本的兼容性>: ${formData.paramCompatibility}\n`;
        output += `<是否存在NV/文件系统/存储介质的频繁擦写>: ${formData.storageWear}\n`;
        output += `<是否存在客户敏感信息泄漏>: ${formData.sensitiveInfo}\n`;
        output += `<是否存在重要参数还原失败系统不停重启或变砖>: ${formData.paramReset}\n`;
        output += `<是否更新API文档>: ${formData.apiDocUpdate}\n`;
        output += `[其他需要合入的分支]: ${formData.otherBranches}${formData.otherBranches === 'Y' ? `, ${formData.otherBranchesText}` : ''}\n`;
        output += `[RN描述]: ${formData.rnDescription}${formData.rnDescription === 'Y' ? `, ${formData.rnDescriptionText}` : ''}\n`;
        output += `<FSG/NV更新>: ${formData.fsgUpdate}\n`;
        if (formData.fsgUpdate === 'Y') {
          output += `<FSG TAG>: ${formData.fsgTag}\n`;
          output += `<FSG SW>: ${formData.fsgSW}\n`;
          output += `<FSG RF>: ${formData.fsgRF}\n`;
          output += `<FSG DATE>: ${formData.fsgDate}\n`;
        }
        output += `\n<<< Test Notes >>>\n`;
        output += `<软件测试>: ${formData.softwareTest}${formData.softwareTestText ? `, ${formData.softwareTestText}` : ''}\n`;
        output += `<压力测试>: ${formData.stressTest}${formData.stressTestText ? `, ${formData.stressTestText}` : ''}\n`;
        output += `<硬件测试>: ${formData.hardwareTest}${formData.hardwareTestText ? `, ${formData.hardwareTestText}` : ''}\n`;
        output += `<AP侧AT指令新增或修改>: ${formData.apAtCommand}\n`;
        return output;
      };

      useEffect(() => {
        setOutputText(generateOutput());
      }, [formData]);

      const handleChange = (e) => {
        const { name, value, type, checked } = e.target;
        setFormData({
          ...formData,
          [name]: type === 'checkbox' ? (checked ? 'Y' : 'N') : value
        });
      };
      
      // ADDED: New handler for affectedFunction checkboxes
      const handleFunctionChange = (e) => {
        const { value, checked } = e.target;
        setFormData(prevFormData => {
          const { affectedFunction } = prevFormData;
          let newFunctions;
          if (checked) {
            newFunctions = [...affectedFunction, value];
          } else {
            newFunctions = affectedFunction.filter(item => item !== value);
          }
          return { ...prevFormData, affectedFunction: newFunctions };
        });
      };

      const handleTranslate = () => {
        const appid = '20230407001631922'; // 百度翻译: 替换为你的APP ID
        const key = 'NWfzkJM4TktoCcy5VoPD'; // 百度翻译: 替换为你的密钥
        const salt = (new Date).getTime();
        const query = outputText;
        const from = 'zh';
        const to = 'en';
        const str1 = appid + query + salt + key;
        const sign = MD5(str1);
        
        const callbackName = "handleBaiduTranslateCallback";
        
        window[callbackName] = (response) => {
          if (response.trans_result && response.trans_result.length > 0) {
            const translatedText = response.trans_result.map(item => item.dst).join('\n');
            setOutputText(outputText + '\n\n--- English commit ---\n' + translatedText);
          } else {
            alert('翻译失败: ' + (response.error_msg || '未知错误'));
          }
          // Clean up
          delete window[callbackName];
          document.body.removeChild(script);
        };

        const script = document.createElement('script');
        script.src = `http://api.fanyi.baidu.com/api/trans/vip/translate?q=${encodeURIComponent(query)}&appid=${appid}&salt=${salt}&from=${from}&to=${to}&sign=${sign}&callback=${callbackName}`;
        document.body.appendChild(script);
      };

      return (
        <div className="container mx-auto p-4 max-w-3xl">
          <h1 className="text-2xl font-bold mb-4">Commit Description Generator</h1>
          <div className="space-y-4">
            <div>
              <label className="block text-sm font-medium">提交P4生成的路径前缀</label>
              <input
                type="text"
                name="commit_path_info"
                value={formData.commit_path_info}
                onChange={handleChange}
                className="mt-1 block w-full border rounded p-2"
                placeholder="如: <EIGEN><R05><PLAT><10.66.90.122>"
              />
            </div>
            <div>
              <label className="block text-sm font-medium">邮箱前缀</label>
              <input
                type="text"
                name="emailPrefix"
                value={formData.emailPrefix}
                onChange={handleChange}
                className="mt-1 block w-full border rounded p-2"
                placeholder="请输入邮箱前缀全称"
              />
            </div>
            <div>
              <label className="block text-sm font-medium">integrate from</label>
              <input
                type="checkbox"
                name="integrate_from_flag"
                checked={formData.integrate_from_flag === 'Y'}
                onChange={handleChange}
                className="mt-1"
              /> Y
              {formData.integrate_from_flag === 'Y' && (
                <div className="space-y-2 mt-2">
                  <input
                    type="text"
                    name="integrate_from_id"
                    value={formData.integrate_from_id}
                    onChange={handleChange}
                    className="block w-full border rounded p-2"
                    placeholder="请输入对应integrate from的P4 ID或git commit ID"
                  />
                </div>
              )}
            </div>
            <div>
              <label className="block text-sm font-medium">修改点简述</label>
              <input
                type="text"
                name="changeDescription"
                value={formData.changeDescription}
                onChange={handleChange}
                className="mt-1 block w-full border rounded p-2"
                placeholder="请输入修改点简述"
              />
            </div>
            <div>
              <label className="block text-sm font-medium">修改分类</label>
              <select
                name="changeCategory"
                value={formData.changeCategory}
                onChange={handleChange}
                className="mt-1 block w-full border rounded p-2"
              >
                <option value="新增需求">新增需求</option>
                <option value="客户缺陷修改">客户缺陷修改</option>
                <option value="内部缺陷修改">内部缺陷修改</option>
              </select>
            </div>
            <div>
              <label className="block text-sm font-medium">根本原因</label>
              <textarea
                name="rootCause"
                value={formData.rootCause}
                onChange={handleChange}
                className="mt-1 block w-full border rounded p-2"
                placeholder="请输入根本原因"
              />
            </div>
            <div>
              <label className="block text-sm font-medium">解决方案</label>
              <textarea
                name="solution"
                value={formData.solution}
                onChange={handleChange}
                className="mt-1 block w-full border rounded p-2"
                placeholder="请输入解决方案"
              />
            </div>
            <div>
              <label className="block text-sm font-medium">Jira ID</label>
              <input
                type="text"
                name="jiraID"
                value={formData.jiraID}
                onChange={handleChange}
                className="mt-1 block w-full border rounded p-2"
                placeholder="若涉及填写关联的Jira ID，若多个以英文逗号分隔，若提交修改点已绑定Jira ID，此处填N"
              />
            </div>
            <div>
              <label className="block text-sm font-medium">CVE ID</label>
              <input
                type="text"
                name="cveID"
                value={formData.cveID}
                onChange={handleChange}
                className="mt-1 block w-full border rounded p-2"
                placeholder="请输入CVE ID，不涉及填N"
              />
            </div>
            {/* MODIFIED: Replaced text input with checkboxes */}
            <div>
              <label className="block text-sm font-medium">影响功能名称</label>
              <div className="flex items-center space-x-4 mt-1">
                <label className="inline-flex items-center">
                  <input
                    type="checkbox"
                    value="other"
                    checked={formData.affectedFunction.includes('other')}
                    onChange={handleFunctionChange}
                    className="form-checkbox h-5 w-5 text-blue-600"
                  />
                  <span className="ml-2 text-sm">other 当以下功能列表没有时生成后需手动替换实际内容,如果为多个功能项使用英语“,”做分割</span>
                </label>
              </div>
              <div className="flex items-center space-x-4 mt-1">
                <label className="inline-flex items-center">
                  <input
                    type="checkbox"
                    value="Audio record&Audio play"
                    checked={formData.affectedFunction.includes('Audio record&Audio play')}
                    onChange={handleFunctionChange}
                    className="form-checkbox h-5 w-5 text-blue-600"
                  />
                  <span className="ml-2 text-sm">Audio record&Audio play</span>
                </label>
                <label className="inline-flex items-center">
                  <input
                    type="checkbox"
                    value="AutoBaud"
                    checked={formData.affectedFunction.includes('AutoBaud')}
                    onChange={handleFunctionChange}
                    className="form-checkbox h-5 w-5 text-blue-600"
                  />
                  <span className="ml-2 text-sm">AutoBaud</span>
                </label>
                <label className="inline-flex items-center">
                  <input
                    type="checkbox"
                    value="BLE"
                    checked={formData.affectedFunction.includes('BLE')}
                    onChange={handleFunctionChange}
                    className="form-checkbox h-5 w-5 text-blue-600"
                  />
                  <span className="ml-2 text-sm">BLE</span>
                </label>
                <label className="inline-flex items-center">
                  <input
                    type="checkbox"
                    value="BT"
                    checked={formData.affectedFunction.includes('BT')}
                    onChange={handleFunctionChange}
                    className="form-checkbox h-5 w-5 text-blue-600"
                  />
                  <span className="ml-2 text-sm">BT</span>
                </label>
                <label className="inline-flex items-center">
                  <input
                    type="checkbox"
                    value="Call Quality&Volume"
                    checked={formData.affectedFunction.includes('Call Quality&Volume')}
                    onChange={handleFunctionChange}
                    className="form-checkbox h-5 w-5 text-blue-600"
                  />
                  <span className="ml-2 text-sm">Call Quality&Volume</span>
                </label>
                <label className="inline-flex items-center">
                  <input
                    type="checkbox"
                    value="Camera"
                    checked={formData.affectedFunction.includes('Camera')}
                    onChange={handleFunctionChange}
                    className="form-checkbox h-5 w-5 text-blue-600"
                  />
                  <span className="ml-2 text-sm">Camera</span>
                </label>
            </div>
            <div className="flex items-center space-x-4 mt-1">
                <label className="inline-flex items-center">
                  <input
                    type="checkbox"
                    value="CMUX"
                    checked={formData.affectedFunction.includes('CMUX')}
                    onChange={handleFunctionChange}
                    className="form-checkbox h-5 w-5 text-blue-600"
                  />
                  <span className="ml-2 text-sm">CMUX</span>
                </label>
                <label className="inline-flex items-center">
                  <input
                    type="checkbox"
                    value="Data Call"
                    checked={formData.affectedFunction.includes('Data Call')}
                    onChange={handleFunctionChange}
                    className="form-checkbox h-5 w-5 text-blue-600"
                  />
                  <span className="ml-2 text-sm">Data Call</span>
                </label>
                <label className="inline-flex items-center">
                  <input
                    type="checkbox"
                    value="DM_CMCC"
                    checked={formData.affectedFunction.includes('DM_CMCC')}
                    onChange={handleFunctionChange}
                    className="form-checkbox h-5 w-5 text-blue-600"
                  />
                  <span className="ml-2 text-sm">DM_CMCC</span>
                </label>
                <label className="inline-flex items-center">
                  <input
                    type="checkbox"
                    value="DSDS"
                    checked={formData.affectedFunction.includes('DSDS')}
                    onChange={handleFunctionChange}
                    className="form-checkbox h-5 w-5 text-blue-600"
                  />
                  <span className="ml-2 text-sm">DSDS</span>
                </label>
                <label className="inline-flex items-center">
                  <input
                    type="checkbox"
                    value="DSSS"
                    checked={formData.affectedFunction.includes('DSSS')}
                    onChange={handleFunctionChange}
                    className="form-checkbox h-5 w-5 text-blue-600"
                  />
                  <span className="ml-2 text-sm">DSSS</span>
                </label>
                <label className="inline-flex items-center">
                  <input
                    type="checkbox"
                    value="DTMF"
                    checked={formData.affectedFunction.includes('DTMF')}
                    onChange={handleFunctionChange}
                    className="form-checkbox h-5 w-5 text-blue-600"
                  />
                  <span className="ml-2 text-sm">DTMF</span>
                </label>
            </div>
            <div className="flex items-center space-x-4 mt-1">
                <label className="inline-flex items-center">
                  <input
                    type="checkbox"
                    value="DualUART"
                    checked={formData.affectedFunction.includes('DualUART')}
                    onChange={handleFunctionChange}
                    className="form-checkbox h-5 w-5 text-blue-600"
                  />
                  <span className="ml-2 text-sm">DualUART</span>
                </label>
                <label className="inline-flex items-center">
                  <input
                    type="checkbox"
                    value="eCALL"
                    checked={formData.affectedFunction.includes('eCALL')}
                    onChange={handleFunctionChange}
                    className="form-checkbox h-5 w-5 text-blue-600"
                  />
                  <span className="ml-2 text-sm">eCALL</span>
                </label>
                <label className="inline-flex items-center">
                  <input
                    type="checkbox"
                    value="ECM"
                    checked={formData.affectedFunction.includes('ECM')}
                    onChange={handleFunctionChange}
                    className="form-checkbox h-5 w-5 text-blue-600"
                  />
                  <span className="ml-2 text-sm">ECM</span>
                </label>
                <label className="inline-flex items-center">
                  <input
                    type="checkbox"
                    value="eMBMS"
                    checked={formData.affectedFunction.includes('eMBMS')}
                    onChange={handleFunctionChange}
                    className="form-checkbox h-5 w-5 text-blue-600"
                  />
                  <span className="ml-2 text-sm">eMBMS</span>
                </label>
                <label className="inline-flex items-center">
                  <input
                    type="checkbox"
                    value="FILE"
                    checked={formData.affectedFunction.includes('FILE')}
                    onChange={handleFunctionChange}
                    className="form-checkbox h-5 w-5 text-blue-600"
                  />
                  <span className="ml-2 text-sm">FILE</span>
                </label>
                <label className="inline-flex items-center">
                  <input
                    type="checkbox"
                    value="FTP(S)"
                    checked={formData.affectedFunction.includes('FTP(S)')}
                    onChange={handleFunctionChange}
                    className="form-checkbox h-5 w-5 text-blue-600"
                  />
                  <span className="ml-2 text-sm">FTP(S)</span>
                </label>
            </div>
            <div className="flex items-center space-x-4 mt-1">
                <label className="inline-flex items-center">
                  <input
                    type="checkbox"
                    value="GNSS"
                    checked={formData.affectedFunction.includes('GNSS')}
                    onChange={handleFunctionChange}
                    className="form-checkbox h-5 w-5 text-blue-600"
                  />
                  <span className="ml-2 text-sm">GNSS</span>
                </label>
                <label className="inline-flex items-center">
                  <input
                    type="checkbox"
                    value="HTTP(S)"
                    checked={formData.affectedFunction.includes('HTTP(S)')}
                    onChange={handleFunctionChange}
                    className="form-checkbox h-5 w-5 text-blue-600"
                  />
                  <span className="ml-2 text-sm">HTTP(S)</span>
                </label>
                <label className="inline-flex items-center">
                  <input
                    type="checkbox"
                    value="Jamming"
                    checked={formData.affectedFunction.includes('Jamming')}
                    onChange={handleFunctionChange}
                    className="form-checkbox h-5 w-5 text-blue-600"
                  />
                  <span className="ml-2 text-sm">Jamming</span>
                </label>
                <label className="inline-flex items-center">
                  <input
                    type="checkbox"
                    value="Limited_Network"
                    checked={formData.affectedFunction.includes('Limited_Network')}
                    onChange={handleFunctionChange}
                    className="form-checkbox h-5 w-5 text-blue-600"
                  />
                  <span className="ml-2 text-sm">Limited_Network</span>
                </label>
                <label className="inline-flex items-center">
                  <input
                    type="checkbox"
                    value="LowPower"
                    checked={formData.affectedFunction.includes('LowPower')}
                    onChange={handleFunctionChange}
                    className="form-checkbox h-5 w-5 text-blue-600"
                  />
                  <span className="ml-2 text-sm">LowPower</span>
                </label>
                <label className="inline-flex items-center">
                  <input
                    type="checkbox"
                    value="LwM2M"
                    checked={formData.affectedFunction.includes('LwM2M')}
                    onChange={handleFunctionChange}
                    className="form-checkbox h-5 w-5 text-blue-600"
                  />
                  <span className="ml-2 text-sm">LwM2M</span>
                </label>
            </div>
            <div className="flex items-center space-x-4 mt-1">
                <label className="inline-flex items-center">
                  <input
                    type="checkbox"
                    value="MBIM"
                    checked={formData.affectedFunction.includes('MBIM')}
                    onChange={handleFunctionChange}
                    className="form-checkbox h-5 w-5 text-blue-600"
                  />
                  <span className="ml-2 text-sm">MBIM</span>
                </label>
                <label className="inline-flex items-center">
                  <input
                    type="checkbox"
                    value="MMS"
                    checked={formData.affectedFunction.includes('MMS')}
                    onChange={handleFunctionChange}
                    className="form-checkbox h-5 w-5 text-blue-600"
                  />
                  <span className="ml-2 text-sm">MMS</span>
                </label>
                <label className="inline-flex items-center">
                  <input
                    type="checkbox"
                    value="MQTT"
                    checked={formData.affectedFunction.includes('MQTT')}
                    onChange={handleFunctionChange}
                    className="form-checkbox h-5 w-5 text-blue-600"
                  />
                  <span className="ml-2 text-sm">MQTT</span>
                </label>
                <label className="inline-flex items-center">
                  <input
                    type="checkbox"
                    value="Netlight"
                    checked={formData.affectedFunction.includes('Netlight')}
                    onChange={handleFunctionChange}
                    className="form-checkbox h-5 w-5 text-blue-600"
                  />
                  <span className="ml-2 text-sm">Netlight</span>
                </label>
                <label className="inline-flex items-center">
                  <input
                    type="checkbox"
                    value="Network"
                    checked={formData.affectedFunction.includes('Network')}
                    onChange={handleFunctionChange}
                    className="form-checkbox h-5 w-5 text-blue-600"
                  />
                  <span className="ml-2 text-sm">Network</span>
                </label>
                <label className="inline-flex items-center">
                  <input
                    type="checkbox"
                    value="NITZ&QNTP"
                    checked={formData.affectedFunction.includes('NITZ&QNTP')}
                    onChange={handleFunctionChange}
                    className="form-checkbox h-5 w-5 text-blue-600"
                  />
                  <span className="ml-2 text-sm">NITZ&QNTP</span>
                </label>
            </div>
            <div className="flex items-center space-x-4 mt-1">
                <label className="inline-flex items-center">
                  <input
                    type="checkbox"
                    value="OOS"
                    checked={formData.affectedFunction.includes('OOS')}
                    onChange={handleFunctionChange}
                    className="form-checkbox h-5 w-5 text-blue-600"
                  />
                  <span className="ml-2 text-sm">OOS</span>
                </label>
                <label className="inline-flex items-center">
                  <input
                    type="checkbox"
                    value="PHB"
                    checked={formData.affectedFunction.includes('PHB')}
                    onChange={handleFunctionChange}
                    className="form-checkbox h-5 w-5 text-blue-600"
                  />
                  <span className="ml-2 text-sm">PHB</span>
                </label>
                <label className="inline-flex items-center">
                  <input
                    type="checkbox"
                    value="Portal"
                    checked={formData.affectedFunction.includes('Portal')}
                    onChange={handleFunctionChange}
                    className="form-checkbox h-5 w-5 text-blue-600"
                  />
                  <span className="ml-2 text-sm">Portal</span>
                </label>
                <label className="inline-flex items-center">
                  <input
                    type="checkbox"
                    value="PPP"
                    checked={formData.affectedFunction.includes('PPP')}
                    onChange={handleFunctionChange}
                    className="form-checkbox h-5 w-5 text-blue-600"
                  />
                  <span className="ml-2 text-sm">PPP</span>
                </label>
                <label className="inline-flex items-center">
                  <input
                    type="checkbox"
                    value="PPP_NP"
                    checked={formData.affectedFunction.includes('PPP_NP')}
                    onChange={handleFunctionChange}
                    className="form-checkbox h-5 w-5 text-blue-600"
                  />
                  <span className="ml-2 text-sm">PPP_NP</span>
                </label>
                <label className="inline-flex items-center">
                  <input
                    type="checkbox"
                    value="ProductiveATCheck"
                    checked={formData.affectedFunction.includes('ProductiveATCheck')}
                    onChange={handleFunctionChange}
                    className="form-checkbox h-5 w-5 text-blue-600"
                  />
                  <span className="ml-2 text-sm">ProductiveATCheck</span>
                </label>
            </div>
            <div className="flex items-center space-x-4 mt-1">
                <label className="inline-flex items-center">
                  <input
                    type="checkbox"
                    value="PSM"
                    checked={formData.affectedFunction.includes('PSM')}
                    onChange={handleFunctionChange}
                    className="form-checkbox h-5 w-5 text-blue-600"
                  />
                  <span className="ml-2 text-sm">PSM</span>
                </label>
                <label className="inline-flex items-center">
                  <input
                    type="checkbox"
                    value="PSM_QCX"
                    checked={formData.affectedFunction.includes('PSM_QCX')}
                    onChange={handleFunctionChange}
                    className="form-checkbox h-5 w-5 text-blue-600"
                  />
                  <span className="ml-2 text-sm">PSM_QCX</span>
                </label>
                <label className="inline-flex items-center">
                  <input
                    type="checkbox"
                    value="QOOS"
                    checked={formData.affectedFunction.includes('QOOS')}
                    onChange={handleFunctionChange}
                    className="form-checkbox h-5 w-5 text-blue-600"
                  />
                  <span className="ml-2 text-sm">QOOS</span>
                </label>
                <label className="inline-flex items-center">
                  <input
                    type="checkbox"
                    value="QuecLocator"
                    checked={formData.affectedFunction.includes('QuecLocator')}
                    onChange={handleFunctionChange}
                    className="form-checkbox h-5 w-5 text-blue-600"
                  />
                  <span className="ml-2 text-sm">QuecLocator</span>
                </label>
                <label className="inline-flex items-center">
                  <input
                    type="checkbox"
                    value="RFTESTPWR"
                    checked={formData.affectedFunction.includes('RFTESTPWR')}
                    onChange={handleFunctionChange}
                    className="form-checkbox h-5 w-5 text-blue-600"
                  />
                  <span className="ml-2 text-sm">RFTESTPWR</span>
                </label>
                <label className="inline-flex items-center">
                  <input
                    type="checkbox"
                    value="RMNET"
                    checked={formData.affectedFunction.includes('RMNET')}
                    onChange={handleFunctionChange}
                    className="form-checkbox h-5 w-5 text-blue-600"
                  />
                  <span className="ml-2 text-sm">RMNET</span>
                </label>
            </div>
            <div className="flex items-center space-x-4 mt-1">
                <label className="inline-flex items-center">
                  <input
                    type="checkbox"
                    value="RNDIS"
                    checked={formData.affectedFunction.includes('RNDIS')}
                    onChange={handleFunctionChange}
                    className="form-checkbox h-5 w-5 text-blue-600"
                  />
                  <span className="ml-2 text-sm">RNDIS</span>
                </label>
                <label className="inline-flex items-center">
                  <input
                    type="checkbox"
                    value="SecurityTest"
                    checked={formData.affectedFunction.includes('SecurityTest')}
                    onChange={handleFunctionChange}
                    className="form-checkbox h-5 w-5 text-blue-600"
                  />
                  <span className="ml-2 text-sm">SecurityTest</span>
                </label>
                <label className="inline-flex items-center">
                  <input
                    type="checkbox"
                    value="SIMCard"
                    checked={formData.affectedFunction.includes('SIMCard')}
                    onChange={handleFunctionChange}
                    className="form-checkbox h-5 w-5 text-blue-600"
                  />
                  <span className="ml-2 text-sm">SIMCard</span>
                </label>
                <label className="inline-flex items-center">
                  <input
                    type="checkbox"
                    value="SLIC"
                    checked={formData.affectedFunction.includes('SLIC')}
                    onChange={handleFunctionChange}
                    className="form-checkbox h-5 w-5 text-blue-600"
                  />
                  <span className="ml-2 text-sm">SLIC</span>
                </label>
                <label className="inline-flex items-center">
                  <input
                    type="checkbox"
                    value="SMS"
                    checked={formData.affectedFunction.includes('SMS')}
                    onChange={handleFunctionChange}
                    className="form-checkbox h-5 w-5 text-blue-600"
                  />
                  <span className="ml-2 text-sm">SMS</span>
                </label>
                <label className="inline-flex items-center">
                  <input
                    type="checkbox"
                    value="SMS_QSS"
                    checked={formData.affectedFunction.includes('SMS_QSS')}
                    onChange={handleFunctionChange}
                    className="form-checkbox h-5 w-5 text-blue-600"
                  />
                  <span className="ml-2 text-sm">SMS_QSS</span>
                </label>
            </div>
            <div className="flex items-center space-x-4 mt-1">
                <label className="inline-flex items-center">
                  <input
                    type="checkbox"
                    value="SMTP(S)"
                    checked={formData.affectedFunction.includes('SMTP(S)')}
                    onChange={handleFunctionChange}
                    className="form-checkbox h-5 w-5 text-blue-600"
                  />
                  <span className="ml-2 text-sm">SMTP(S)</span>
                </label>
                <label className="inline-flex items-center">
                  <input
                    type="checkbox"
                    value="SOCKET_FWD"
                    checked={formData.affectedFunction.includes('SOCKET_FWD')}
                    onChange={handleFunctionChange}
                    className="form-checkbox h-5 w-5 text-blue-600"
                  />
                  <span className="ml-2 text-sm">SOCKET_FWD</span>
                </label>
                <label className="inline-flex items-center">
                  <input
                    type="checkbox"
                    value="STK"
                    checked={formData.affectedFunction.includes('STK')}
                    onChange={handleFunctionChange}
                    className="form-checkbox h-5 w-5 text-blue-600"
                  />
                  <span className="ml-2 text-sm">STK</span>
                </label>
                <label className="inline-flex items-center">
                  <input
                    type="checkbox"
                    value="TCP&UDP"
                    checked={formData.affectedFunction.includes('TCP&UDP')}
                    onChange={handleFunctionChange}
                    className="form-checkbox h-5 w-5 text-blue-600"
                  />
                  <span className="ml-2 text-sm">TCP&UDP</span>
                </label>
                <label className="inline-flex items-center">
                  <input
                    type="checkbox"
                    value="TCPSSL"
                    checked={formData.affectedFunction.includes('TCPSSL')}
                    onChange={handleFunctionChange}
                    className="form-checkbox h-5 w-5 text-blue-600"
                  />
                  <span className="ml-2 text-sm">TCPSSL</span>
                </label>
                <label className="inline-flex items-center">
                  <input
                    type="checkbox"
                    value="TTS DOM"
                    checked={formData.affectedFunction.includes('TTS DOM')}
                    onChange={handleFunctionChange}
                    className="form-checkbox h-5 w-5 text-blue-600"
                  />
                  <span className="ml-2 text-sm">TTS DOM</span>
                </label>
            </div>
            <div className="flex items-center space-x-4 mt-1">
                <label className="inline-flex items-center">
                  <input
                    type="checkbox"
                    value="TTS Oversea"
                    checked={formData.affectedFunction.includes('TTS Oversea')}
                    onChange={handleFunctionChange}
                    className="form-checkbox h-5 w-5 text-blue-600"
                  />
                  <span className="ml-2 text-sm">TTS Oversea</span>
                </label>
                <label className="inline-flex items-center">
                  <input
                    type="checkbox"
                    value="UpgradePowerONOFF"
                    checked={formData.affectedFunction.includes('UpgradePowerONOFF')}
                    onChange={handleFunctionChange}
                    className="form-checkbox h-5 w-5 text-blue-600"
                  />
                  <span className="ml-2 text-sm">UpgradePowerONOFF</span>
                </label>
                <label className="inline-flex items-center">
                  <input
                    type="checkbox"
                    value="URC&RI&Apready"
                    checked={formData.affectedFunction.includes('URC&RI&Apready')}
                    onChange={handleFunctionChange}
                    className="form-checkbox h-5 w-5 text-blue-600"
                  />
                  <span className="ml-2 text-sm">URC&RI&Apready</span>
                </label>
                <label className="inline-flex items-center">
                  <input
                    type="checkbox"
                    value="USB Audio"
                    checked={formData.affectedFunction.includes('USB Audio')}
                    onChange={handleFunctionChange}
                    className="form-checkbox h-5 w-5 text-blue-600"
                  />
                  <span className="ml-2 text-sm">USB Audio</span>
                </label>
                <label className="inline-flex items-center">
                  <input
                    type="checkbox"
                    value="USSD"
                    checked={formData.affectedFunction.includes('USSD')}
                    onChange={handleFunctionChange}
                    className="form-checkbox h-5 w-5 text-blue-600"
                  />
                  <span className="ml-2 text-sm">USSD</span>
                </label>
                <label className="inline-flex items-center">
                  <input
                    type="checkbox"
                    value="Voice Call"
                    checked={formData.affectedFunction.includes('Voice Call')}
                    onChange={handleFunctionChange}
                    className="form-checkbox h-5 w-5 text-blue-600"
                  />
                  <span className="ml-2 text-sm">Voice Call</span>
                </label>
            </div>
            <div className="flex items-center space-x-4 mt-1">
                <label className="inline-flex items-center">
                  <input
                    type="checkbox"
                    value="VOLTE"
                    checked={formData.affectedFunction.includes('VOLTE')}
                    onChange={handleFunctionChange}
                    className="form-checkbox h-5 w-5 text-blue-600"
                  />
                  <span className="ml-2 text-sm">VOLTE</span>
                </label>
                <label className="inline-flex items-center">
                  <input
                    type="checkbox"
                    value="WeakSignal"
                    checked={formData.affectedFunction.includes('WeakSignal')}
                    onChange={handleFunctionChange}
                    className="form-checkbox h-5 w-5 text-blue-600"
                  />
                  <span className="ml-2 text-sm">WeakSignal</span>
                </label>
                <label className="inline-flex items-center">
                  <input
                    type="checkbox"
                    value="WIFI"
                    checked={formData.affectedFunction.includes('WIFI')}
                    onChange={handleFunctionChange}
                    className="form-checkbox h-5 w-5 text-blue-600"
                  />
                  <span className="ml-2 text-sm">WIFI</span>
                </label>
                <label className="inline-flex items-center">
                  <input
                    type="checkbox"
                    value="WIFISCAN"
                    checked={formData.affectedFunction.includes('WIFISCAN')}
                    onChange={handleFunctionChange}
                    className="form-checkbox h-5 w-5 text-blue-600"
                  />
                  <span className="ml-2 text-sm">WIFISCAN</span>
                </label>
                <label className="inline-flex items-center">
                  <input
                    type="checkbox"
                    value="XLAT"
                    checked={formData.affectedFunction.includes('XLAT')}
                    onChange={handleFunctionChange}
                    className="form-checkbox h-5 w-5 text-blue-600"
                  />
                  <span className="ml-2 text-sm">XLAT</span>
                </label>
                <label className="inline-flex items-center">
                  <input
                    type="checkbox"
                    value="CUCC Certification"
                    checked={formData.affectedFunction.includes('CUCC Certification')}
                    onChange={handleFunctionChange}
                    className="form-checkbox h-5 w-5 text-blue-600"
                  />
                  <span className="ml-2 text-sm">CUCC Certification</span>
                </label>
            </div>
            <div className="flex items-center space-x-4 mt-1">
                <label className="inline-flex items-center">
                  <input
                    type="checkbox"
                    value="CT Certification"
                    checked={formData.affectedFunction.includes('CT Certification')}
                    onChange={handleFunctionChange}
                    className="form-checkbox h-5 w-5 text-blue-600"
                  />
                  <span className="ml-2 text-sm">CT Certification</span>
                </label>
                <label className="inline-flex items-center">
                  <input
                    type="checkbox"
                    value="AutoAPN"
                    checked={formData.affectedFunction.includes('AutoAPN')}
                    onChange={handleFunctionChange}
                    className="form-checkbox h-5 w-5 text-blue-600"
                  />
                  <span className="ml-2 text-sm">AutoAPN</span>
                </label>
                <label className="inline-flex items-center">
                  <input
                    type="checkbox"
                    value="Esim"
                    checked={formData.affectedFunction.includes('Esim')}
                    onChange={handleFunctionChange}
                    className="form-checkbox h-5 w-5 text-blue-600"
                  />
                  <span className="ml-2 text-sm">Esim</span>
                </label>
                <label className="inline-flex items-center">
                  <input
                    type="checkbox"
                    value="BLE_9x07"
                    checked={formData.affectedFunction.includes('BLE_9x07')}
                    onChange={handleFunctionChange}
                    className="form-checkbox h-5 w-5 text-blue-600"
                  />
                  <span className="ml-2 text-sm">BLE_9x07</span>
                </label>
                <label className="inline-flex items-center">
                  <input
                    type="checkbox"
                    value="BT_9x07"
                    checked={formData.affectedFunction.includes('BT_9x07')}
                    onChange={handleFunctionChange}
                    className="form-checkbox h-5 w-5 text-blue-600"
                  />
                  <span className="ml-2 text-sm">BT_9x07</span>
                </label>
                <label className="inline-flex items-center">
                  <input
                    type="checkbox"
                    value="DFOTA_9X07"
                    checked={formData.affectedFunction.includes('DFOTA_9X07')}
                    onChange={handleFunctionChange}
                    className="form-checkbox h-5 w-5 text-blue-600"
                  />
                  <span className="ml-2 text-sm">DFOTA_9X07</span>
                </label>
            </div>
            <div className="flex items-center space-x-4 mt-1">
                <label className="inline-flex items-center">
                  <input
                    type="checkbox"
                    value="SGMII"
                    checked={formData.affectedFunction.includes('SGMII')}
                    onChange={handleFunctionChange}
                    className="form-checkbox h-5 w-5 text-blue-600"
                  />
                  <span className="ml-2 text-sm">SGMII</span>
                </label>
                <label className="inline-flex items-center">
                  <input
                    type="checkbox"
                    value="DFOTA_SoftBank"
                    checked={formData.affectedFunction.includes('DFOTA_SoftBank')}
                    onChange={handleFunctionChange}
                    className="form-checkbox h-5 w-5 text-blue-600"
                  />
                  <span className="ml-2 text-sm">DFOTA_SoftBank</span>
                </label>
                <label className="inline-flex items-center">
                  <input
                    type="checkbox"
                    value="Softsim"
                    checked={formData.affectedFunction.includes('Softsim')}
                    onChange={handleFunctionChange}
                    className="form-checkbox h-5 w-5 text-blue-600"
                  />
                  <span className="ml-2 text-sm">Softsim</span>
                </label>
                <label className="inline-flex items-center">
                  <input
                    type="checkbox"
                    value="SPYPOINT"
                    checked={formData.affectedFunction.includes('SPYPOINT')}
                    onChange={handleFunctionChange}
                    className="form-checkbox h-5 w-5 text-blue-600"
                  />
                  <span className="ml-2 text-sm">SPYPOINT</span>
                </label>
                <label className="inline-flex items-center">
                  <input
                    type="checkbox"
                    value="DualNet"
                    checked={formData.affectedFunction.includes('DualNet')}
                    onChange={handleFunctionChange}
                    className="form-checkbox h-5 w-5 text-blue-600"
                  />
                  <span className="ml-2 text-sm">DualNet</span>
                </label>
                <label className="inline-flex items-center">
                  <input
                    type="checkbox"
                    value="FOTA_16M"
                    checked={formData.affectedFunction.includes('FOTA_16M')}
                    onChange={handleFunctionChange}
                    className="form-checkbox h-5 w-5 text-blue-600"
                  />
                  <span className="ml-2 text-sm">FOTA_16M</span>
                </label>
            </div>
            <div className="flex items-center space-x-4 mt-1">
                <label className="inline-flex items-center">
                  <input
                    type="checkbox"
                    value="FOTA_8M"
                    checked={formData.affectedFunction.includes('FOTA_8M')}
                    onChange={handleFunctionChange}
                    className="form-checkbox h-5 w-5 text-blue-600"
                  />
                  <span className="ml-2 text-sm">FOTA_8M</span>
                </label>
                <label className="inline-flex items-center">
                  <input
                    type="checkbox"
                    value="FOTA_CAT6"
                    checked={formData.affectedFunction.includes('FOTA_CAT6')}
                    onChange={handleFunctionChange}
                    className="form-checkbox h-5 w-5 text-blue-600"
                  />
                  <span className="ml-2 text-sm">FOTA_CAT6</span>
                </label>
                <label className="inline-flex items-center">
                  <input
                    type="checkbox"
                    value="GNSS_ASR"
                    checked={formData.affectedFunction.includes('GNSS_ASR')}
                    onChange={handleFunctionChange}
                    className="form-checkbox h-5 w-5 text-blue-600"
                  />
                  <span className="ml-2 text-sm">GNSS_ASR</span>
                </label>
                <label className="inline-flex items-center">
                  <input
                    type="checkbox"
                    value="NCM"
                    checked={formData.affectedFunction.includes('NCM')}
                    onChange={handleFunctionChange}
                    className="form-checkbox h-5 w-5 text-blue-600"
                  />
                  <span className="ml-2 text-sm">NCM</span>
                </label>
                <label className="inline-flex items-center">
                  <input
                    type="checkbox"
                    value="RNDIS_CAT6"
                    checked={formData.affectedFunction.includes('RNDIS_CAT6')}
                    onChange={handleFunctionChange}
                    className="form-checkbox h-5 w-5 text-blue-600"
                  />
                  <span className="ml-2 text-sm">RNDIS_CAT6</span>
                </label>
                <label className="inline-flex items-center">
                  <input
                    type="checkbox"
                    value="XGMII"
                    checked={formData.affectedFunction.includes('XGMII')}
                    onChange={handleFunctionChange}
                    className="form-checkbox h-5 w-5 text-blue-600"
                  />
                  <span className="ml-2 text-sm">XGMII</span>
                </label>
            </div>
            <div className="flex items-center space-x-4 mt-1">
                <label className="inline-flex items-center">
                  <input
                    type="checkbox"
                    value="WhiteList"
                    checked={formData.affectedFunction.includes('WhiteList')}
                    onChange={handleFunctionChange}
                    className="form-checkbox h-5 w-5 text-blue-600"
                  />
                  <span className="ml-2 text-sm">WhiteList</span>
                </label>
                <label className="inline-flex items-center">
                  <input
                    type="checkbox"
                    value="ECM_CAT6"
                    checked={formData.affectedFunction.includes('ECM_CAT6')}
                    onChange={handleFunctionChange}
                    className="form-checkbox h-5 w-5 text-blue-600"
                  />
                  <span className="ml-2 text-sm">ECM_CAT6</span>
                </label>
                <label className="inline-flex items-center">
                  <input
                    type="checkbox"
                    value="FOTA_EC_QCX"
                    checked={formData.affectedFunction.includes('FOTA_EC_QCX')}
                    onChange={handleFunctionChange}
                    className="form-checkbox h-5 w-5 text-blue-600"
                  />
                  <span className="ml-2 text-sm">FOTA_EC_QCX</span>
                </label>
                <label className="inline-flex items-center">
                  <input
                    type="checkbox"
                    value="DFOTA_UNISOC"
                    checked={formData.affectedFunction.includes('DFOTA_UNISOC')}
                    onChange={handleFunctionChange}
                    className="form-checkbox h-5 w-5 text-blue-600"
                  />
                  <span className="ml-2 text-sm">DFOTA_UNISOC</span>
                </label>
                <label className="inline-flex items-center">
                  <input
                    type="checkbox"
                    value="QuecFOTA"
                    checked={formData.affectedFunction.includes('QuecFOTA')}
                    onChange={handleFunctionChange}
                    className="form-checkbox h-5 w-5 text-blue-600"
                  />
                  <span className="ml-2 text-sm">QuecFOTA</span>
                </label>
                <label className="inline-flex items-center">
                  <input
                    type="checkbox"
                    value="GNSS_UNISOC"
                    checked={formData.affectedFunction.includes('GNSS_UNISOC')}
                    onChange={handleFunctionChange}
                    className="form-checkbox h-5 w-5 text-blue-600"
                  />
                  <span className="ml-2 text-sm">GNSS_UNISOC</span>
                </label>
              </div>
              <div className="flex items-center space-x-4 mt-1">
                <label className="inline-flex items-center">
                  <input
                    type="checkbox"
                    value="websocket(s)"
                    checked={formData.affectedFunction.includes('websocket(s)')}
                    onChange={handleFunctionChange}
                    className="form-checkbox h-5 w-5 text-blue-600"
                  />
                  <span className="ml-2 text-sm">websocket(s)</span>
                </label>
                <label className="inline-flex items-center">
                  <input
                    type="checkbox"
                    value="COAP(S)"
                    checked={formData.affectedFunction.includes('COAP(S)')}
                    onChange={handleFunctionChange}
                    className="form-checkbox h-5 w-5 text-blue-600"
                  />
                  <span className="ml-2 text-sm">COAP(S)</span>
                </label>
              </div>
            </div>
            <div>
              <label className="block text-sm font-medium">适用项目</label>
              <select
                name="applicableProject"
                value={formData.applicableProject}
                onChange={handleChange}
                className="mt-1 block w-full border rounded p-2"
              >
                <option value="分支测试">分支测试</option>
                <option value="芯片平台+具体项目名">芯片平台+具体项目名</option>
              </select>
            </div>
            <div>
              <label className="block text-sm font-medium">影响项目类型</label>
              <select
                name="projectType"
                value={formData.projectType}
                onChange={handleChange}
                className="mt-1 block w-full border rounded p-2"
              >
                <option value="标准项目">标准项目</option>
                <option value="Open项目">Open项目</option>
                <option value="Open+标准项目">Open+标准项目</option>
              </select>
            </div>
            <div>
              <label className="block text-sm font-medium">风险等级</label>
              <textarea
                name="riskLevel"
                value={formData.riskLevel}
                onChange={handleChange}
                className="mt-1 block w-full border rounded p-2 h-28"
                placeholder="请输入风险等级（十部必填）"
              />
            </div>
            <div>
              <label className="block text-sm font-medium">关联其它修改点</label>
              <input
                type="text"
                name="relatedChanges"
                value={formData.relatedChanges}
                onChange={handleChange}
                className="mt-1 block w-full border rounded p-2"
                placeholder="如有填写对应P4 ID or git commit ID，以英文逗号分隔,若不涉及填写N"
              />
            </div>
            <h2 className="text-xl font-semibold mt-6">研发自检</h2>
            <div>
              <label className="block text-sm font-medium">ATC 文档名称</label>
              <input
                type="checkbox"
                name="atcDocDescription"
                checked={formData.atcDocDescription === 'Y'}
                onChange={handleChange}
                className="mt-1"
              /> Y
              {formData.atcDocDescription === 'Y' && (
                <textarea
                  name="atcDoc"
                  value={formData.atcDoc}
                  onChange={handleChange}
                  className="mt-1 block w-full border rounded p-2"
                  placeholder="请输入文档名称或路径"
                />
              )}
            </div>
            <div>
              <label className="block text-sm font-medium">是否使用运营商DM协议</label>
              <input
                type="checkbox"
                name="dmProtocol"
                checked={formData.dmProtocol === 'Y'}
                onChange={handleChange}
                className="mt-1"
              /> Y
            </div>
            <div>
              <label className="block text-sm font-medium">是否使用第三方服务器</label>
              <input
                type="checkbox"
                name="thirdPartyServer"
                checked={formData.thirdPartyServer === 'Y'}
                onChange={handleChange}
                className="mt-1"
              /> Y
            </div>
            <div>
              <label className="block text-sm font-medium">是否使用第三方软件</label>
              <input
                type="checkbox"
                name="thirdPartySoftware"
                checked={formData.thirdPartySoftware === 'Y'}
                onChange={handleChange}
                className="mt-1"
              /> Y
            </div>
            <div>
              <label className="block text-sm font-medium">是否为音频默认参数</label>
              <input
                type="checkbox"
                name="audioDefault"
                checked={formData.audioDefault === 'Y'}
                onChange={handleChange}
                className="mt-1"
              /> Y
            </div>
            <div>
              <label className="block text-sm font-medium">是否修改配置文件</label>
              <input
                type="checkbox"
                name="configChange"
                checked={formData.configChange === 'Y'}
                onChange={handleChange}
                className="mt-1"
              /> Y
            </div>
            <div>
              <label className="block text-sm font-medium">是否修改MBN</label>
              <select
                name="mbnChange"
                value={formData.mbnChange}
                onChange={handleChange}
                className="mt-1 block w-full border rounded p-2"
              >
                <option value="N">N</option>
                <option value="Y,无需更新mbn数据库">Y,无需更新mbn数据库</option>
                <option value="Y,已更新mbn数据库">Y,已更新mbn数据库</option>
              </select>
            </div>
            <div>
              <label className="block text-sm font-medium">是否存在定时器非预期的唤醒和休眠锁未释放</label>
              <input
                type="checkbox"
                name="timerIssue"
                checked={formData.timerIssue === 'Y'}
                onChange={handleChange}
                className="mt-1"
              /> Y
            </div>
            <div>
              <label className="block text-sm font-medium">是否存在参数结构变更影响前后版本的兼容性</label>
              <input
                type="checkbox"
                name="paramCompatibility"
                checked={formData.paramCompatibility === 'Y'}
                onChange={handleChange}
                className="mt-1"
              /> Y
            </div>
            <div>
              <label className="block text-sm font-medium">是否存在NV/文件系统/存储介质的频繁擦写</label>
              <input
                type="checkbox"
                name="storageWear"
                checked={formData.storageWear === 'Y'}
                onChange={handleChange}
                className="mt-1"
              /> Y
            </div>
            <div>
              <label className="block text-sm font-medium">是否存在客户敏感信息泄漏</label>
              <input
                type="checkbox"
                name="sensitiveInfo"
                checked={formData.sensitiveInfo === 'Y'}
                onChange={handleChange}
                className="mt-1"
              /> Y
            </div>
            <div>
              <label className="block text-sm font-medium">是否存在重要参数还原失败系统不停重启或变砖</label>
              <input
                type="checkbox"
                name="paramReset"
                checked={formData.paramReset === 'Y'}
                onChange={handleChange}
                className="mt-1"
              /> Y
            </div>
            <div>
              <label className="block text-sm font-medium">是否更新API文档</label>
              <input
                type="checkbox"
                name="apiDocUpdate"
                checked={formData.apiDocUpdate === 'Y'}
                onChange={handleChange}
                className="mt-1"
              /> Y
            </div>
            <div>
              <label className="block text-sm font-medium">其他需要合入的分支</label>
              <input
                type="checkbox"
                name="otherBranches"
                checked={formData.otherBranches === 'Y'}
                onChange={handleChange}
                className="mt-1"
              /> Y
              {formData.otherBranches === 'Y' && (
                <textarea
                  name="otherBranchesText"
                  value={formData.otherBranchesText}
                  onChange={handleChange}
                  className="mt-1 block w-full border rounded p-2 h-32"
                  placeholder="请输入需要合入的分支"
                />
              )}
            </div>
            <div>
              <label className="block text-sm font-medium">RN描述</label>
              <input
                type="checkbox"
                name="rnDescription"
                checked={formData.rnDescription === 'Y'}
                onChange={handleChange}
                className="mt-1"
              /> Y
              {formData.rnDescription === 'Y' && (
                <textarea
                  name="rnDescriptionText"
                  value={formData.rnDescriptionText}
                  onChange={handleChange}
                  className="mt-1 block w-full border rounded p-2"
                  placeholder="请输入RN描述"
                />
              )}
            </div>
            <div>
              <label className="block text-sm font-medium">FSG/NV更新</label>
              <input
                type="checkbox"
                name="fsgUpdate"
                checked={formData.fsgUpdate === 'Y'}
                onChange={handleChange}
                className="mt-1"
              /> Y
              {formData.fsgUpdate === 'Y' && (
                <div className="space-y-2 mt-2">
                  <input
                    type="text"
                    name="fsgTag"
                    value={formData.fsgTag}
                    onChange={handleChange}
                    className="block w-full border rounded p-2"
                    placeholder="请输入FSG TAG"
                  />
                  <input
                    type="text"
                    name="fsgSW"
                    value={formData.fsgSW}
                    onChange={handleChange}
                    className="block w-full border rounded p-2"
                    placeholder="请输入FSG SW"
                  />
                  <input
                    type="text"
                    name="fsgRF"
                    value={formData.fsgRF}
                    onChange={handleChange}
                    className="block w-full border rounded p-2"
                    placeholder="请输入FSG RF"
                  />
                  <input
                    type="text"
                    name="fsgDate"
                    value={formData.fsgDate}
                    onChange={handleChange}
                    className="block w-full border rounded p-2"
                    placeholder="请输入FSG DATE"
                  />
                </div>
              )}
            </div>
            <h2 className="text-xl font-semibold mt-6">Test Notes</h2>
            <div>
              <label className="block text-sm font-medium">软件测试</label>
              <div className="flex items-center space-x-4 mt-1">
                 <label><input type="radio" name="softwareTest" value="Y" checked={formData.softwareTest === 'Y'} onChange={handleChange} className="mr-1"/> Y</label>
                 <label><input type="radio" name="softwareTest" value="N" checked={formData.softwareTest === 'N'} onChange={handleChange} className="mr-1"/> N</label>
              </div>
              <textarea
                name="softwareTestText"
                value={formData.softwareTestText}
                onChange={handleChange}
                className="mt-1 block w-full border rounded p-2"
                placeholder="请输入具体原因"
              />
            </div>
            <div>
              <label className="block text-sm font-medium">压力测试</label>
              <div className="flex items-center space-x-4 mt-1">
                 <label><input type="radio" name="stressTest" value="Y" checked={formData.stressTest === 'Y'} onChange={handleChange} className="mr-1"/> Y</label>
                 <label><input type="radio" name="stressTest" value="N" checked={formData.stressTest === 'N'} onChange={handleChange} className="mr-1"/> N</label>
              </div>
              <textarea
                name="stressTestText"
                value={formData.stressTestText}
                onChange={handleChange}
                className="mt-1 block w-full border rounded p-2"
                placeholder="请输入具体原因"
              />
            </div>
            <div>
              <label className="block text-sm font-medium">硬件测试</label>
              <div className="flex items-center space-x-4 mt-1">
                 <label><input type="radio" name="hardwareTest" value="Y" checked={formData.hardwareTest === 'Y'} onChange={handleChange} className="mr-1"/> Y</label>
                 <label><input type="radio" name="hardwareTest" value="N" checked={formData.hardwareTest === 'N'} onChange={handleChange} className="mr-1"/> N</label>
              </div>
              <textarea
                name="hardwareTestText"
                value={formData.hardwareTestText}
                onChange={handleChange}
                className="mt-1 block w-full border rounded p-2"
                placeholder="请输入具体原因"
              />
            </div>
            <div>
              <label className="block text-sm font-medium">AP侧AT指令新增或修改</label>
              <input
                type="checkbox"
                name="apAtCommand"
                checked={formData.apAtCommand === 'Y'}
                onChange={handleChange}
                className="mt-1"
              /> Y
            </div>
            <div className="flex space-x-2">
              <button
                onClick={() => {
                  navigator.clipboard.writeText(outputText).then(() => alert('已复制到剪贴板！'));
                }}
                className="mt-4 bg-blue-500 text-white p-2 rounded"
              >
                复制内容
              </button>
              <button
                onClick={handleTranslate}
                className="mt-4 bg-green-500 text-white p-2 rounded"
              >
                中英翻译
              </button>
            </div>
            <div>
              <label className="block text-sm font-medium">输出预览</label>
              <textarea
                readOnly
                value={outputText}
                className="mt-1 block w-full border rounded p-2 h-64"
              />
            </div>
            <div>
            <label className="block text-sm font-medium"><b>提示说明</b></label>
            <div 
                contentEditable 
                className="mt-1 block w-full border rounded p-2 h-32 overflow-auto"
                placeholder="请输入提示..."
            >
                如果想使用中英翻译功能,请修改，在源代码搜索关键字符“百度翻译”,替换为自己的百度翻译APPID以及Key信息。具体的百度翻译API接口替换流程请见gitee仓库https://gitee.com/loyalty521/code-commit
                如果有需求更改可以快特或者飞书联系我进行更新。作者: larson.li@quectel.com
            </div>
            </div>
          </div>
        </div>
      );
    };

    ReactDOM.render(<CommitForm />, document.getElementById('root'));
  </script>
</body>
</html>